<template>
	<view>
		<view class="navlist">
			<view class="item">
				<image src="../../static/team(5).png" mode=""></image>
				<view class="">
					<view class="">{{team.pnum}}</view>
					<view class="">{{$t('account.name32')}} </view>
				</view>
			</view>
			<view class="item">
				<image src="../../static/team(1).png" mode=""></image>
				<view class="">
					<view class="">{{team.pnums}}</view>
					<view class="">{{$t('account.name33')}} </view>
				</view>
			</view>
			<view class="item">
				<image src="../../static/team(4).png" mode=""></image>
				<view class="">
					<view class="">{{team.self_virtually_device}}</view>
					<view class="">{{$t('account.name34')}} </view>
				</view>
			</view>
			<view class="item">
				<image src="../../static/team(3).png" mode=""></image>
				<view class="">
					<view class="">{{team.team_all_virtually_device}}</view>
					<view class="">{{$t('account.name35')}}</view>
				</view>
			</view>
			<view class="item">
				<image src="../../static/team(6).png" mode=""></image>
				<view class="">
					<view class="">{{team.self_real_device}}</view>
					<view class="">{{$t('account.name36')}}</view>
				</view>
			</view>
			<view class="item">
				<image src="../../static/team(2).png" mode=""></image>
				<view class="">
					<view class="">{{team.team_real_device}}</view>
					<view class="">{{$t('account.name37')}}</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-x="false" scroll-y="true" class="scroll-views" @scrolltolower="scrolltolower"
			:style="'height:'+scrollheight+'px;'">
			<view class="conter">
				<!-- <view class="maxtitle">我的直营：{{pnum}};我的店员：{{pnums}} ;直营人邀请码：{{user}}</view> -->
				<view class="cent" v-if="teamone.length>0">
					<view class="list" v-for="(item,index) in  teamone" :key="item.id">
						<view class="" style="text-align: center;">
							<image class="myimg" :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="left">
							<view class="num">
							</view>
							<view class="name"><span>{{$t('account.name38')}} : </span> {{item.nickname}}</view>
							<view class="name"><span>{{$t('account.name39')}} : </span>{{item.username}}</view>
							<view class="name"><span>{{$t('account.name40')}} : </span>{{item.level}}</view>
							<view class="name"><span>{{$t('account.name34')}} : </span> {{item.virtually_bind}}</view>
							<view class="name"><span>{{$t('account.name36')}} : </span> {{item.real_bind}}</view>
							<view class="name"><span>{{$t('account.name41')}} : </span>{{item.createtime}}</view>
							<view class="name"><span>{{$t('account.name42')}} : </span>{{item.order_time}}</view>
						</view>
					</view>
				</view>
				<noneDate v-if="teamone.length==0">
				</noneDate>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import noneDate from '@/pageA/components/noneDate.vue'
	export default {
		components: {
			noneDate
		},
		data() {
			return {
				teamone: [],
				pnum: '0',
				pnums: '0',
				page: 1,
				user: '',
				limit: 10,
				team: {},
				scrollheight: 0
			}
		},
		// onReachBottom() {
		// 	this.page++
		// 	this.getTeamone(this.page, this.limit)
		// },
		onLoad(options) {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.scrollheight = uni.getWindowInfo().windowHeight - 236
			uni.setNavigationBarTitle({
				title: options.name
			})
		},
		onShow() {
			this.getTeamone(this.page, this.limit)
		},
		methods: {
			scrolltolower() {
				this.page++
				this.getTeamone(this.page, this.limit)
			},
			getTeamone(page, limit) {
				this.$fun.ajax.post('user/newTeam', {
					page,
					limit
				}).then(res => {
					if (res.code == 1) {
						//console.log(res.data)
						//console.log(res.data.length)
						if (this.page > 1) {
							if (res.data.list.length != 0) {
								this.pnum = res.data.pnum;
								this.pnums = res.data.pnums;
								this.user = res.data.user;
								//console.log(this.teamone)
								//console.log(...res.data.list)
								this.teamone.push(...res.data.list);
								//console.log(this.teamone)
							} else {
								if (this.page != 1) {
									this.page--
									this.$fun.msg(this.$t('nomore'))
								}
							}
						} else {
							this.team = res.data
							this.teamone = res.data.list
						}

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.navlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 30rpx 0;
		// position: sticky;
		// top: 0;
		// z-index: 1;
		background-color: #f1f1f1;

		.item {
			width: 336rpx;
			height: 116rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #19181A;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			text-align: center;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 60rpx;
			}
		}
	}

	.conter {

		padding-top: 20rpx;

		// height: auto;


		.maxtitle {
			width: 696rpx;
			margin: 0 auto;
			font-size: 26rpx;
			color: #5990FF;
		}

		.cent {
			width: 696rpx;
			margin: 0 auto;


		}
	}

	.list {
		// width: 696rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		align-items: center;
		margin-bottom: 20rpx;

		.myimg {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: auto;
		}

		.left {
			// margin-left: 30rpx;

			.num {
				display: flex;
				font-size: 24upx;
				color: #333333;

				.tel {
					width: 34upx;
					height: 34upx;
					margin-left: 10upx;
				}
			}

			.name {
				font-size: 30upx;
				margin-top: 5upx;
				color: #666666;
				border-bottom: 1rpx solid #E6E6E6;
				height: 88rpx;
				line-height: 88rpx;

				span {
					font-weight: 600;
					font-size: 28rpx;
					color: #19181A;
					margin-right: 20rpx;
				}
			}

			.data {
				font-size: 30upx;
				margin-top: 5upx;
				color: #999999;
			}
		}

		.right {
			width: 285upx;
			margin-left: 10upx;
			text-align: right;

			.vip {
				height: 43upx;

				text {
					font-size: 22upx;
					border: 1upx solid #5990FF;
					color: #5990FF;
					padding: 0 13upx;
					border-radius: 5upx;
				}
			}

			.next {
				font-size: 26upx;
				color: #5990FF;
			}

			.title {
				font-size: 26upx;
				color: #666666;
			}
		}
	}
</style>